<template>
  <el-container class="layout-container">
    <el-aside width="210px">
      <div class="logo-container">
        <img src="/logo.png" alt="Logo" class="logo">
        <h5 class="system-title">郑州超算中心运行维护系统</h5>
      </div>
      <el-menu
        default-active="1-1-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :unique-opened="true"
      >
        <!-- 工单管理模块 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Location /></el-icon>
            <span class="menu-level-1">工单管理模块</span>
          </template>
          
          <el-sub-menu index="1-1">
            <template #title>
              <span class="menu-level-2">工单流程管理</span>
            </template>
            <el-menu-item index="1-1-1">
              <router-link to="/work-order-list" class="menu-level-3">查询工单</router-link>
            </el-menu-item>
            
              <el-menu-item index="1-1-2">
                <router-link to="/work-order-initiate" class="menu-level-3">发起工单</router-link>
              </el-menu-item>
              <el-menu-item index="1-1-3">
                <router-link to="/work-order-distribute" class="menu-level-3">派发工单</router-link>
              </el-menu-item>
              <el-menu-item index="1-1-4">
                <router-link to="/work-order-accept" class="menu-level-3">受理工单</router-link>
              </el-menu-item>
              <el-menu-item index="1-1-5">
                <router-link to="/work-order-reply" class="menu-level-3">回复工单</router-link>
              </el-menu-item>
              <el-menu-item index="1-1-6">
                <router-link to="/work-order-internal-forward" class="menu-level-3">内部转发工单</router-link>
              </el-menu-item>
              <el-menu-item index="1-1-7">
                <router-link to="/work-order-file" class="menu-level-3">归档工单</router-link>
              </el-menu-item>
              <el-menu-item index="1-1-8">
                <router-link to="/work-order-cancel" class="menu-level-3">撤销工单</router-link>
              </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="1-2">
            <template #title>
              <span class="menu-level-2">通知提醒管理</span>
            </template>
            <el-menu-item index="1-2-1">
              <router-link to="/notification-management" class="menu-level-3">通知管理</router-link>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="1-3">
            <template #title>
              <span class="menu-level-2">基础报表管理</span>
            </template>
            <el-menu-item index="1-3-1">
              <router-link to="/data-dashboard" class="menu-level-3">数据统计看板</router-link>
            </el-menu-item>
            <el-menu-item index="1-3-2">
              <router-link to="/efficiency-analysis" class="menu-level-3">处理效率分析</router-link>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="1-4">
            <template #title>
              <span class="menu-level-2">系统配置管理</span>
            </template>
            <el-menu-item index="1-4-1">
              <router-link to="/system-settings" class="menu-level-3">系统设置</router-link>
            </el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <!-- 设备管理模块 -->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span class="menu-level-1">设备管理模块</span>
          </template>
          
          <el-sub-menu index="2-1">
            <template #title>
              <span class="menu-level-2">资产管理</span>
            </template>
            <el-menu-item index="2-1-1">
              <router-link to="/equipment-management" class="menu-level-3">设备信息管理</router-link>
            </el-menu-item>
            <el-menu-item index="2-1-2">
              <router-link to="/material-management" class="menu-level-3">物料信息管理</router-link>
            </el-menu-item>
            <el-menu-item index="2-1-3">
              <router-link to="/parts-management" class="menu-level-3">配件信息管理</router-link>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2-2">
            <template #title>
              <span class="menu-level-2">采购管理</span>

            </template>
            <el-menu-item index="2-2-1">
              <router-link to="/purchase-management" class="menu-level-3">采购管理</router-link>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2-3">
            <template #title>
              <span class="menu-level-2">维护管理</span>
            </template>
            <el-menu-item index="2-3-1">
              <router-link to="/maintenance-plan" class="menu-level-3">维护计划</router-link>
            </el-menu-item>
            <el-menu-item index="2-3-2">
              <router-link to="/maintenance-records" class="menu-level-3">维护记录</router-link>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2-4">
            <template #title>
              <span class="menu-level-2">报废管理</span>
            </template>
            <el-menu-item index="2-4-1">
              <router-link to="/scrap-management" class="menu-level-3">报废管理</router-link>
            </el-menu-item>

          </el-sub-menu>

          <el-sub-menu index="2-5">
            <template #title>
              <span class="menu-level-2">数据看板管理</span>
            </template>
            <el-menu-item index="2-5-1">
              <router-link to="/dashboard-container" class="menu-level-3">设备数据看板</router-link>
            </el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <!-- 人员管理模块 -->
        <el-sub-menu index="3">
          <template #title>
            <el-icon><User /></el-icon>
            <span class="menu-level-1">人员管理模块</span>
          </template>
          <el-menu-item index="3-1">
            <router-link to="/user-list" class="menu-level-2">用户列表</router-link>
          </el-menu-item>
          <el-menu-item index="3-2">
            <router-link to="/user-role" class="menu-level-2">用户角色</router-link>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="custom-header">
        <div class="header-right">
          <el-dropdown>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f482067446a8d4/u/avatar.png"></el-avatar>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span class="user-name">用户名</span>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import {
  Location,
  Tools,
  User
} from '@element-plus/icons-vue'

// 处理登出
const logout = () => {
  ElMessage.success('已退出登录')
  // 清除登录状态
  // window.location.href = '/login' // 重定向到登录页面
}

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.logo-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px;
}

.logo {
  height: 40px;
  margin-right: 10px;
}

.system-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  font-family: 'Arial', sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

/* 调整 el-header 样式 */
.el-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 50px !important; /* 调整高度 */
  margin-bottom: 0; /* 移除底部边距 */
  padding-bottom: 0; /* 移除底部内边距 */
}

.header-right {
  display: flex;
  align-items: center;
}

.user-name {
  margin-left: 10px;
  font-weight: bold;
}

/* 调整 el-main 样式 */
.el-main {
  padding: 1px 20px; /* 减少顶部空白 */
}

/* 新增/修改的样式 */
.el-menu-item a {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  width: 100%;
  padding: 0 4px;
}

.el-menu-item a.router-link-active {
  color: #409EFF !important;
  font-weight: 500;
}

/* 调整菜单项悬停效果 */
.el-menu-item:hover {
  background-color: #f5f7fa !important;
}

/* 调整选中项背景色（与图片中的浅蓝匹配） */
.el-menu-item.is-active {
  background-color: #e8f4ff !important;
}

/* 调整菜单组标题样式 */
.el-menu-item-group__title {
  padding: 8px 0 8px 40px !important;
  color: #909399 !important;
  font-size: 12px;
}

/* 优化用户头像区域 */
.header-right {
  gap: 12px;
}

/* 三级菜单样式优化 */
.menu-level-1 {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.menu-level-2 {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.menu-level-3 {
  font-size: 13px;
  color: #909399;
}

.menu-level-3:hover {
  color: #409EFF !important;
}

.menu-level-3.router-link-active {
  color: #409EFF !important;
  font-weight: 500;
  background-color: #e8f4ff !important;
}

/* 调整菜单缩进 */
.el-sub-menu .el-sub-menu__title {
  padding-left: 20px !important;
}

.el-menu-item {
  padding-left: 40px !important;
}
</style>